<script setup>
import {} from "vue";
const props = defineProps({
  list: {
    type: Array,
  },
  title: {
    type: String,
    default: "歌单",
  },
});

const onPlayList = (id) => {
  uni.navigateTo({ url: `/pages/musicList/musicList?id=${id}` });
};
</script>

<template>
  <view class="my-collect-list-wrap">
    <view class="song-list-title">
      <view class="title">{{ props.title }}（{{ props.list.length }}个）</view>
      <view>
        <i class="iconfont icon-tianjia"></i>
      </view>
    </view>
    <view
      class="my-collect-list"
      v-for="item in props.list"
      :key="item.id"
      @tap="onPlayList(item.id)"
    >
      <image
        :src="item.coverImgUrl + '?param=200y200'"
        mode="aspectFit"
        class="list-img"
      />
      <view class="list-info">
        <view class="list-name ellipsis1">{{ item.name }}</view>
        <view class="list-count ellipsis1">
          {{ item.trackCount }}首
          <slot name="creator" :nickname="item.creator.nickname"></slot>
        </view>
      </view>
      <view class="more">
        <i class="iconfont icon-gengduo1"></i>
      </view>
    </view>
    <view class="no-data" v-if="props.list.length === 0">
      <image src="@/static/noData.png" mode="aspectFit" />
      <view class="no-data-tip">空空如也</view>
    </view>
  </view>
</template>

<style lang="scss">
.my-collect-list-wrap {
  padding: 0 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  .song-list-title {
    margin-top: 20rpx;
    height: 50rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      font-size: 24rpx;
      color: $assistText;
    }
    .icon-tianjia {
      margin-right: -4rpx;
    }
  }
  .my-collect-list {
    font-size: 30rpx;
    position: relative;
    margin: 20rpx 0;
    height: 100rpx;
    display: flex;
    align-items: center;
    .list-img {
      height: 100rpx;
      width: 100rpx;
      background-color: lightgray;
      border-radius: 20rpx;
    }
    .list-info {
      margin-left: 20rpx;
      .list-name {
        line-height: 50rpx;
        width: 450rpx;
      }
      .list-count {
        display: flex;
        font-size: 24rpx;
        color: $assistText;
        line-height: 40rpx;
        width: 450rpx;
      }
    }
    .more {
      position: absolute;
      right: -12rpx;
      color: $assistText;
    }
  }
  .no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    .no-data-tip {
      letter-spacing: 4rpx;
      line-height: 100rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: $assistText;
    }
  }
}
</style>
